
import { Swiper } from 'antd-mobile'
import './index.scss'
import { debounce } from 'lodash'
import { connect } from 'react-redux'
import { useEffect, useState } from 'react'

import { changeNavTypeAction } from '../../../../store/actions/app'
import useSearchTitle from '../../../hooks/useSearchTitle'
const Swiper1 = (props) => {
    const { swiperlist, changeNavTypeAction } = props
    const [swiperBG, SETswiperBG] = useState(true)
    const searchTitle = useSearchTitle();
    useEffect(() => {
        window.onscroll = debounce(() => {
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
            if (scrollTop > 10) {
                SETswiperBG(false)
            } else {
                SETswiperBG(true)
            }
            if (scrollTop >= 300) {
                changeNavTypeAction(false)
            } else {
                changeNavTypeAction(true)
            }
            return () => {
                window.onscroll = null
            }
        }, 500)
    }, [changeNavTypeAction])
    return <div className='actt' >
        <div className='header' style={swiperBG ? { 'background': '#cfa775' } : { 'background': '#000' }}>
            <div className='logo' >荣耀亲选</div>
            <div className='swiper-search'>
                <div className='sousou'>
                    <span className='iconfont icon-sousuoxiao'></span>
                </div>
                {searchTitle}
                {/* <div className='broadcast' onClick={gotosearch}><span>儿童手表</span><span className='iconfont icon-huo'></span></div> */}
            </div>
            <div className='login2'><span className="iconfont icon-lingdang-xianxing"></span><span>登录</span></div>
        </div>
        <div className='swiper1' style={swiperBG ? { 'background': '#cfa775' } : { 'background': '#000' }}>
            <div className='swi-nav'><div className='t1'>推荐</div><div className='t2' >智能家居</div><div className='t3'></div></div>
            <div className='swi-con'>
                <div className='swi-image' >
                    <Swiper autoplay={swiperBG} loop >
                        {swiperlist.map((item, index) => <Swiper.Item key={item.id} >
                            <img src={item.adsPicPath} alt="" />
                        </Swiper.Item>
                        )}
                    </Swiper>
                </div>
                <div className='swi-l'></div>
                <div className='swi-r'></div>
            </div>
        </div></div>
}


export default connect(state => ({ type: state.app.type }), { changeNavTypeAction })(Swiper1)